import React from "react";
import { BrowserRouter as Router , Route , Link , Switch , useHistory , useLocation , useRouteMatch , useParams } from "react-router-dom";
// import ShowList from "./ShowList";
// import ShowDetail from "./ShowDetail";

const Home = () => {
    const history = useHistory();
    return <div>
        Home
        <button onClick={() => history.push("/news#id=100")}>To News</button>
    </div>
};
const News = () => {
    const location = useLocation();
    console.log(location);
    return <div>News</div>
};
const NewsDetail = () => {
    const params = useParams();
    console.log(params);
    return <div>
        NewsDetail
        <h1>{params.id}</h1>
    </div>
};
// const List = () => {
//     return <ShowList />
// };

// const Detail = () => {
//     return <ShowDetail />
// };

const App = () => {
    return <div>
        {/* <Router>
            <div style={{display:"flex"}}>
               <div style={{flex:"1"}}>
                    <Link to="/list">List</Link>
                    <Route path="/list" component={List} />             
                </div>
                <div style={{flex:"1"}}> */}
                    {/* <Route path="/list/:id" component={Detail} /> */}
                {/* </div> 
            </div>
        </Router> */}

        <Router>
            <Link to="/?a=100">Home</Link>
            <Link to="/news">News</Link>
            <div>
                <div>
                    Hello
                    <ul>
                        <li><Link to="/news/1">News1</Link></li>
                        <li><Link to="/news/2">News2</Link></li>
                    </ul>
                </div>
                <div>
                    <Route exact path="/">
                        <Home />
                    </Route>
                    <Switch> //只显示匹配成功的第一个
                        <Route path="/news/:id" component={NewsDetail} />                
                        <Route path="/news" component={News} />
                    </Switch>
                </div>
            </div>
        </Router>
    </div>
};

export default App;